<template>
  <a-layout style="">
    <!-- 内容 -->
    <a-layout-content
      :style="{
        background: '#fff',
        padding: '24px',
        margin: 0,
        minHeight: '280px',
      }"
    >
      <div class="tableEdit">
        <a-button type="primary" @click="add()" size="large"> 新增 </a-button>
      </div>

      <a-table :columns="columns" :data-source="categoryTree" :pagination="false">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'name'">
            <a>
              {{ record.name }}
            </a>
          </template>

          <template v-else-if="column.key === 'action'">
            <span>
              <a-button type="primary" @click="edit(record)"> 编辑 </a-button>
              <a-divider type="vertical" />
              <!-- 是否删除 -->
              <a-popconfirm
                title="Are you sure delete this task?"
                ok-text="Yes"
                cancel-text="No"
                @confirm="handleDelete(record.id)"
              >
                <a-button type="primary" danger> 删除 </a-button>
              </a-popconfirm>
            </span>
          </template>
        </template>
      </a-table>
    </a-layout-content>
  </a-layout>

  <a-modal
    title="分类表单"
    v-model:open="modalVisible"
    :confirm-loading="modalLoading"
    @ok="handleModalOk"
    ok-text="确认"
    cancel-text="取消"
  >
    <a-form
      :model="category"
      :label-col="{ span: 6 }"
      :wrapper-col="{ span: 18 }"
    >
      <a-form-item label="名称">
        <a-input v-model:value="category.name" />
      </a-form-item>
      <a-form-item label="父分类">
        <a-select v-model:value="category.parent" ref="select">
          <a-select-option :value="0"> </a-select-option>

          <a-select-option
            v-for=" item in categoryTree"  :key="item.id"
            v-model="item.id"
            :value="item.id"
            
            :disabled="category.id === item.id"
          >
            {{ item.name }}{{ item.id }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="顺序">
        <a-input v-model:value="category.sort" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup lang="ts">
import { useApi } from "@/api";
import { Tool } from "@/utils/tool";
import { message } from "ant-design-vue";
import { computed, onMounted, ref } from "vue";
import { CategoryTree, ECategory } from "../type";
const api = useApi();


//表格的列
const columns = [
  {
    title: "名称",
    dataIndex: "name",
    key: "name",
  },
  {
    title: "父分类",
    key: "parent",
    dataIndex: "parent",
  },
  {
    title: "顺序",
    dataIndex: "sort",
    key: "sort",
  },
  {
    title: "Action",
    key: "action",
  },
];

import useCategory from "@/store/categorystore";

const ecategoryStore = useCategory()





//------------------页面未加载-----------------
/**
 * 1.分类数据数据查询
 **/

const  categoryTree =computed(() => { return ecategoryStore.categoryTree; }) as unknown   as CategoryTree[]

 

onMounted(()=>{

  ecategoryStore.getECategory()
})



//-------------------页面加载完成-----------------

//一.头部
//保存需要的

const modalVisible = ref(false);
const modalLoading = ref(false);

const category= ref<ECategory>({
  name: "",
  parent: 1,
  sort: 1,
});
/**
 * 1.新增分类
 */
const add = () => {
  modalVisible.value = true;
  category.value = {
    
    name: "",
    parent: 0,
    sort: 0,
  };
};

//二.表格


/**
 * modal界面 保存分类
 */
const handleModalOk = async () => {
  modalLoading.value = true;
  console.log("点击保存", category.value);

  await api.saveCategoryList(category.value);
  modalVisible.value = false;
  message.success("分类保存成功");
  modalLoading.value = false;
  // 重新加载列表
  ecategoryStore.getECategory();
};

/**
 * 1.编辑
 */

const edit = (record: ECategory) => {
  modalVisible.value = true;
  category.value = Tool.copy(record);
};

/**
 * 2.删除
 */
const handleDelete = async (id: number) => {
  await api.deleteCategory(id);
  ecategoryStore.getECategory();
};
</script>

<style scoped>
img {
  width: 50px;
  height: 50px;
}
.tableEdit {
  display: flex;
  flex-direction: row;
  justify-content: start;
}
.custom-search-input {
  width: 30%;
}
</style>
